<template>
  <el-card style="padding: 0">
    <!-- <div class="table_title">{{title}}</div> -->
    <div :id="eId" style="width: 100%; height: 285px;"></div>
  </el-card>
</template>

<script>
    var echarts = require('echarts/lib/echarts')
    // 引入柱状图
    require('echarts/lib/chart/pie')
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/toolbox')
    require('echarts/lib/component/title')

    export default {
      name: 'Pie',
      props: ['title', 'eId', 'colorArr', 'chartData'],
      created() {
      },
      data() {
        return {
          formModel: {},
          option: {
            // color: ['rgba(228,128,128,1)'], /* color表示折线图的颜色  */
            title: {
              text: this.title
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
              show: true,
              feature: {
                // dataZoom: {
                //   yAxisIndex: 'none'
                // },
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            series: [
              {
                name: this.title,
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: []
              }
            ]
          }
        }
      },
      watch: {
        chartData: {
          deep: true,
          handler(val) {
            debugger
            // 接收val之后，解析；取name放入legend
            const legend = []
            val.forEach(element => {
              legend.push(element.name)
            })
            this.option.legend.data = legend
            this.option.series[0].data = val
            this.setOptions()
          }
        }
      },
      mounted() {
        this.initCharts()
        window.addEventListener('resize', () => {
          this.chart.resize()
        })
      },
      methods: {
        initCharts() {
          this.chart = echarts.init(document.getElementById(this.eId))
          this.setOptions(...this.option)
        },
        setOptions() {
          debugger
          this.chart.setOption(this.option)
        }

      }
    }

</script>

<style scoped>

</style>
